<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/head.jsp"%>
</head>
<body>
	<form class="layui-form" style="margin: 20px;">

		<div class="layui-inline">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="name" lay-verify="" lay-search>
				</select>
			</div>
		</div>

		<div class="layui-inline" style="margin-left: 15px;">
			<input type="button" class="layui-btn layui-btn" lay-submit
				lay-filter="search" value="搜索" /> <input type="button"
				class="layui-btn layui-btn" value="添加" />
		</div>

		<input type="hidden" name="pageIndex" value="1"><input
			type="hidden" name="pageLimit" value="8"> <input
			type="hidden" name="action" value="get">
	</form>

	<!-- 	table -->
	<div style="margin-top: 0px;">
		<table class="layui-table">
			<thead>
				<tr>
					<th>序号</th>
					<th>类型</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div id="test1" style="text-align: center; padding-right: 30px;"></div>
	</div>

	<script type="text/javascript">
		formOnSubmit('search', 'json', '/ArticleTypeServlet', function(data) {
			var curr = $('input[name="pageIndex"]').val()
			var limit = $('input[name="pageLimit"]').val()
			// 渲染
			laypage
					.render({
						elem : 'test1',
						count : data.count,
						layout : [ 'count', 'prev', 'page', 'next', 'refresh',
								'skip' ],
						curr : curr,
						limit : limit,
						jump : function(obj, first) {
							$('input[name="pageIndex"]').val(obj.curr)
							$('input[name="pageLimit"]').val(obj.limit)
							if (!first) {
								refresh();
							}
						}
					})
			var html = "";
			var tpl = $('#tradd').html();
			$.each(data.list, function(i, dom) {
				var d = {
					id : i + 1 + (curr - 1) * limit,
					account:dom.id,
					name : dom.name
				}
				html += laytpl(tpl).render(d)
				$('tbody').html(html)
			});
		})

		$('input[value="搜索"]').click()

		function refresh() {
			$('input[value="搜索"]').click()
		}

		$('input[value="添加"]').click(function() {
			layer.prompt(function(value, index) {
				ajax('/ArticleTypeServlet', 'text', {
					name : value,
					action : "add"
				}, function(res) {
					if (res == 'success') {
						layer.msg("添加成功", {
							time : 1000,
							icon : 6
						}, function() {
							layer.close(index);
							refresh();
						})
					} else if(res == "repeat"){
						layer.msg("类别已存在", {
							time : 1000,
							icon : 5
						})
					}else {
						layer.msg("添加失败", {
							time : 1000,
							icon : 5
						})
					}
				})
				layer.close(index);
			});
		});

		ajax('/ArticleTypeServlet', 'json', {
			action : 'getAll'
		}, function(res) {
			var html = '<option value="">请选择类型</option>'
			$.each(res, function(i, dom) {
				html += '<option value="'+dom.name+'">' + dom.name
						+ '</option>'
			})
			$('select').html(html)
			form.render('select')
		})
		
		function del(name){
			layer.confirm("您确定要删除名为" + name + "的类别吗?", {
				title : false,
				closeBtn : 0
			}, function(){
				ajax('/ArticleTypeServlet', 'text', {name:name,action:"del"}, function(res){
					if(res=="success"){
						layer.msg("删除成功", {
							time : 1000,
							icon : 6
						}, function() {
							refresh();
						})
					}else if(res=="fail"){
						layer.msg("删除失败", {
							time : 1000,
							icon : 5
						}, function() {
							refresh();
						})
					}else if(res=="has"){
						layer.msg("仍有作品使用，不可删除", {
							time : 1000,
							icon : 5
						}, function() {
							refresh();
						})
					}
				})
			})
		}
		
		function updata(id){
			layer.prompt(function(value, index) {
				ajax('/ArticleTypeServlet', 'text', {id:id,name:value,action:"upd"}, function(res){
					if(res=="success"){
						layer.msg("修改成功", {
							time : 1000,
							icon : 6
						}, function() {
							layer.close(index);
							refresh();
						})
					}else if(res=="repeat"){
						layer.msg("修改失败，已存在", {
							time : 1000,
							icon : 5
						})
					}else{
						layer.msg("修改失败", {
							time : 1000,
							icon : 5
						})
					}
				})
			})
		}
	</script>
	<script type="text/html" id="tradd">
		<tr>
			<td>{{d.id}}</td>
			<td>{{d.name}}</td>
			<td>
				<a href="javascript:del('{{d.name}}');" class="layui-btn layui-btn-danger layui-btn-sm">删除</a>
				<a href="javascript:updata('{{d.account}}');" class="layui-btn layui-btn-sm">修改</a>
			</td>
		</tr>
	</script>

</body>
</html>